//  首页业务
// 从本地获取用户名
const user = localStorage.getItem('user')
document.querySelector('.username').innerHTML = user

// 调用鉴权函数
checkLogin()

// 调用退出业务函数
logout()

// 渲染统计数据
async function getData(){
    const token = localStorage.getItem('token')
    const{data:{
        groupData,overview,year,salaryData,provinceData
    }}=await axios({
        url:'/dashboard',
        // 请求需要携带token才能拿到数据
        // headers:{
        //     Authorization:token
        // }
    })

    // 调用函数  渲染概览数据
    renderOverview(overview)

    // 调用函数  渲染薪资走势数据
    renderYeraSalary(year)

    // 调用函数  渲染薪资分布数据
    renderSalary(salaryData)

    // 调用函数  渲染分组数据
    renderGroup(groupData)

    // 调用函数  渲染男女薪资分布数据
    renderGenderData(salaryData)

    // 调用函数  渲染籍贯分布数据
    renderProvince(provinceData)
}
getData()


//概览业务--overview
function renderOverview(overview){
    // 拿到对象中的属性名放到数组中
    Object.keys(overview).forEach((key)=>{
        document.querySelector(`.${key}`).innerHTML=overview[key]
    })
}


// 薪资走势 --year
function renderYeraSalary(year){
    //初始化echarts实例
    const myChart = echarts.init(document.querySelector('#line'))
    // 设置配置项
    const option = {
        title:{
            text:'2024全学科薪资走势',
            left:12,
            top:10,
            textStyle:{
                fontsize:16
            }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: year.map(item=>item.month),
          axisLine:{
            lineStyle:{
              color:'#999',
              type:'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
              type:'dashed'
            }
          }
        },
        // 系列图表
        series: [
          {
            data:year.map(item=>item.salary),
            type: 'line',
            areaStyle: {
                color:{
                    // 图表的样式 
                    type: 'linear',
                    // xy渐变的起始点
                    x: 0,
                    y: 0,
                    // x2控制水平方向 y2控制垂直方向
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#73c2fb' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#f1fbfb' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
            },
            smooth: true,
            // 标记大小
            symbolSize:8,
            // 线条样式
            lineStyle:{
                width:6,
                color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#0a98fb' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#3f68f7' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
            }
          }
        ]
      };
    //   使用配置项,显示图表
    myChart.setOption(option)
}


// 薪资分布 --salaryData
function renderSalary(salaryData){
    //初始化echarts实例
    const myChart = echarts.init(document.querySelector('#salary'))
    // 设置配置项
    const option = {
        title:{
          text:'班级薪资分布',
          left:10,
          top:10
        },
        // 提示组件
        tooltip: {
          trigger: 'item',
          data:['班级薪资分布']
        },
        // 图例组件
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [
          {
            // 和提示组件data保持一致
            name: '班级薪资分布',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: salaryData.map(item=>{
                return {value:item.g_count + item.b_count,name:item.label}
            })
          }
        ],
        // 图表颜色 顺序--顺时针
        color:['#f0a645','#6295f8','#63b9f4','#6ad09e']
      };
    // 使用配置项,显示图表
      myChart.setOption(option)
}


// 分组数据  --groupData
function renderGroup(groupData){
    //初始化echarts实例
    const myChart = echarts.init(document.querySelector('#lines'))
    // 设置配置项
    const option = {
        xAxis: {
          type: 'category',
          //学生姓名
          data: groupData[1].map(item=>item.name),
          axisLine:{
            lineStyle:{
              color:'#999',
              type:'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
              type:'dashed'
            }
          }
        },
        series: [
          {
            // 期望工资
            data: groupData[1].map(item=>item.hope_salary),
            type: 'bar',
            itemStyle:{
                color:{
                    // 图表的样式 
                    type: 'linear',
                    // xy渐变的起始点
                    x: 0,
                    y: 0,
                    // x2控制水平方向 y2控制垂直方向
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#70d2a2' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#ccefde' // 100% 处的颜色
                    }],
                  }
            }
          },
          {
            // 实际工资
            data: groupData[1].map(item=>item.salary),
            type: 'bar',
            itemStyle:{
                color:{
                    // 图表的样式 
                    type: 'linear',
                    // xy渐变的起始点
                    x: 0,
                    y: 0,
                    // x2控制水平方向 y2控制垂直方向
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#6faff9' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#d2e3f8' // 100% 处的颜色
                    }],
                  }
            }
          }
        ]
      };
     // 使用配置项,显示图表
     myChart.setOption(option)

    //  点击切换分组数据
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        // 确定触发事件的事件源
        if(e.target.classList.contains('btn')){
            // 高亮切换
            // 删除类 btn-blue
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            // 添加类 btn-blue
            e.target.classList.add('btn-blue')

            // 点击不同的组 显示不同的数据 
            // 展示不同分组数据
            // option内的配置（索引）
            // xAxis轴中的data值  series中对象data的值
            const index = e.target.innerHTML
            // 给option内的配置项 更换数据
            option.xAxis.data = groupData[index].map(item=>item.name)
            option.series[0].data = groupData[index].map(item=>item.hope_salary)
            option.series[1].data = groupData[index].map(item=>item.salary)
            //重新设置配置项  显示图表
            myChart.setOption(option)
        }
    })
}


// 男女薪资分布
function renderGenderData(salary){
        //初始化echarts实例
        const myChart = echarts.init(document.querySelector('#gender'))

        const datas = [
            salary.map(item=>{
                return {name:item.label,value:item.b_count}
            }),
            salary.map(item=>{
                return {name:item.label,value:item.g_count}
            })
        ]
      const option = {
        title: [
          {
          text: '男女薪资分布',
          left: 10,
          top:10,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16
          }
          },
              {
          text: '男生',
          left: 'center',
          top:'45%',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
          },
              {
          text: '女生',
          left: 'center',
          bottom:'5%',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14
          }
          },
          ],
        //   鼠标悬停提示
          tooltip:{
            trigger:'item'
          },
        series: datas.map(function (data, idx) {
          var top = idx * 40+10;
          return {
            type: 'pie',
            radius: [45, 60],
            top: top + '%',
            height: '33.33%',
            left: 'center',
            width: 400,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            data: data,
            color:['#f2a33a','#5198f7','#56bdf7','#62d499']
          };
        })
      };
          // 使用配置项,显示图表
          myChart.setOption(option)
}


// 籍贯分布--provinceData
function renderProvince(mapData){
     //初始化echarts实例
     const myChart = echarts.init(document.querySelector('#map'))
    //  后台返回数据是有学生数据的省份，要所有省份都存在，
    //后期拿到返回的数据 把学生个数的给datalist中的value
    //学生个数在返回的数据中  value里面--后台value值给datalist中的val
     const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
      ]
      // 将所有学生数据的省份找出来
      dataList.forEach(item=>{
        //find找数组元素 如果能找到返回该数组元素 ，找不到返回undeifined
        const res =mapData.find(ele=>ele.name.includes(item.name))
        if(res){
          // 拿后台返回的value值给datalist中的value
          item.value=res.value
        }
      })
     const option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
      }
     // 使用配置项,显示图表
     myChart.setOption(option)
}